<template>
    <fieldset>
        <legend>子组件</legend>
        <h1>子组件</h1>
        <h1>props:{{ name1 }}</h1>
        <button @click="handleClick">点击传递给父组件</button>
    </fieldset>
</template>
<script setup>
import { defineProps, defineEmits, toRefs, defineExpose } from 'vue';
//可以直接使用await 获取数据
let data = await fetch("https://chst.vip/data/index.json")
    .then(body => body.json())
    .then(res => res)

console.log(data)
//defineProps 声明props

//解构props的时候 不能使用es6的嵌套解构语法,可以解构出来,但是没有办法暴露给模板

//toRefs的作用: 使用es6解构语法解构一些响应式的时候,会丢失对数据的响应,使用toRefs可以用于追踪某个解构变量的响应

//defineExpose 作用是将当前组件的一些属性或者方法暴露给组件实例

let props = defineProps({
    data: {
        type: Object,
        default() {
            return "默认值"
        }
    }
})

let { name1 } = toRefs(props.data)

//通过defineEmits定义需要传递的事件

let emit = defineEmits(["send"])
console.log(emit)
//一个传递给父组件的点击事件函数

function handleClick() {
    emit("send", "vue2=>vue3")
}
//声明一些暴露给组件的属性

defineExpose({
    name1,
    log() {
        console.log('gg')
    }
})

</script>